<template>
	<view class="container">
		<!-- <uni-nav-bar left-icon="left" title="账户登录" :border="false" background-color="#f8f8f8" color="#333"
			@clickLeft="navigateBack" /> -->

		<!-- 插画和营销文案 -->
		<view class="illustration-section">
			<image src="/static/images/luckin_background.png" mode="widthFix" class="illustration-image" />
			<view class="marketing-bubble">
				<image src="/static/images/luckin_coupon.png" class="coupon-icon" mode="aspectFit" />
				<text class="marketing-text">首次登录</text>
				<text class="marketing-text">领新人专享券包</text>
			</view>
		</view>

		<!-- 登录按钮区域 -->
		<view class="login-buttons">
			<!-- 手机号安全登录 -->
			<button class="login-btn phone-login-btn" @click="showPhoneLoginModal" :disabled="loading">
				手机号安全登录
			</button>

			<!-- 一键登录 -->
			<button
				class="login-btn wechat-login-btn"
				@click="checkPrivacyAndWechatLogin"
				:disabled="loading"
			>
				一键登录
			</button>
		</view>

		<!-- 隐私协议 -->
		<view class="privacy-agreement">
			<checkbox-group @change="togglePrivacyAgreement">
				<label class="checkbox-label">
					<checkbox value="agreed" :checked="privacyAgreed" color="#07C160" style="transform:scale(0.7)" />
					<text class="agreement-text">
						我已阅读并同意
						<text class="agreement-link" @click="showUserAgreement">《用户协议》</text>
						和
						<text class="agreement-link" @click="showPrivacyPolicy">《隐私政策》</text>
					</text>
				</label>
			</checkbox-group>
		</view>
		
		<!-- 手机号登录弹窗 -->
		<uni-popup ref="phoneLoginPopup" type="bottom">
			<view class="popup-content2">
				<view class="popup-title">手机号码登录</view>
				<view class="popup-close" @click="hidePhoneLoginModal">
					<text class="close-icon">×</text>
				</view>
				
				<view class="input-group">
					<view class="input-item">
						<input type="number" v-model="phone" maxlength="11" placeholder="请输入手机号" class="input" />
					</view>
					<view class="input-item code-item">
						<input type="number" v-model="smsCode" maxlength="6" placeholder="请输入验证码" class="input" />
						<view class="code-btn" :class="{'code-btn-disabled': isCounting}" @click="sendSmsCode">
							{{smsBtnText}}
						</view>
					</view>
				</view>
				
				<button class="confirm-btn" @click="handlePhoneLogin" :disabled="!canLogin || loading">
					登录
				</button>
			</view>
		</uni-popup>
		
		<!-- 用户协议弹窗 -->
		<uni-popup ref="agreementPopup" type="bottom">
			<view class="popup-content agreement-content">
				<view class="popup-title">用户协议</view>
				<view class="popup-close" @click="hideAgreement">
					<text class="close-icon">×</text>
				</view>
				<scroll-view scroll-y="true" class="agreement-scroll">
					<view class="agreement-text-content">
						<view class="agreement-section">
							<view class="agreement-section-title">一、协议的范围</view>
							<view class="agreement-section-text">
								1.1 欢迎您使用我们的零食商城小程序，本协议是您与我们之间关于使用本服务所订立的协议。
							</view>
							<view class="agreement-section-text">
								1.2 本协议内容包括协议正文、法律声明、隐私政策及所有本应用已经发布的或将来可能发布的各类规则。所有规则为本协议不可分割的组成部分，与协议正文具有同等法律效力。
							</view>
						</view>
						
						<view class="agreement-section">
							<view class="agreement-section-title">二、服务内容</view>
							<view class="agreement-section-text">
								2.1 本应用的具体服务内容由我们根据实际情况提供，例如：零食展示、商品购买、订单管理、优惠券领取等。
							</view>
							<view class="agreement-section-text">
								2.2 我们提供的服务内容可能会不断更新与调整，我们有权增加、变更、中断或终止部分或全部服务。
							</view>
						</view>
						
						<view class="agreement-section">
							<view class="agreement-section-title">三、账号注册与使用</view>
							<view class="agreement-section-text">
								3.1 您可以使用手机号码注册成为用户。
							</view>
							<view class="agreement-section-text">
								3.2 您应当对账号下的行为负责，因此请您妥善保管账号及密码信息。
							</view>
						</view>
						
						<view class="agreement-section">
							<view class="agreement-section-title">四、用户个人信息保护</view>
							<view class="agreement-section-text">
								4.1 保护您的个人信息是我们的重要责任，我们将按照本协议及《隐私政策》的规定收集、使用、存储和共享您的个人信息。
							</view>
							<view class="agreement-section-text">
								4.2 未经您的同意，我们不会向第三方共享、转让您的个人信息，但法律法规另有规定的除外。
							</view>
						</view>
					</view>
				</scroll-view>
				<button class="confirm-btn" @click="hideAgreement">我已阅读并同意</button>
			</view>
		</uni-popup>
		
		<!-- 隐私政策弹窗 -->
		<uni-popup ref="privacyPopup" type="bottom">
			<view class="popup-content agreement-content">
				<view class="popup-title">隐私政策</view>
				<view class="popup-close" @click="hidePrivacy">
					<text class="close-icon">×</text>
				</view>
				<scroll-view scroll-y="true" class="agreement-scroll">
					<view class="agreement-text-content">
						<view class="agreement-section">
							<view class="agreement-section-title">一、我们如何收集和使用您的个人信息</view>
							<view class="agreement-section-text">
								1.1 当您注册、登录、使用我们的零食商城小程序时，我们会收集您的手机号码、微信账号信息等。
							</view>
							<view class="agreement-section-text">
								1.2 为了向您提供商品展示、购买、配送等服务，我们可能收集您的位置信息、收货地址、购买记录等信息。
							</view>
						</view>
						
						<view class="agreement-section">
							<view class="agreement-section-title">二、我们如何使用Cookie和同类技术</view>
							<view class="agreement-section-text">
								2.1 为了确保网站正常高效运转、为您获得更轻松的访问体验，我们会在您的设备上存储名为Cookie的小数据文件。
							</view>
							<view class="agreement-section-text">
								2.2 您可以通过浏览器设置拒绝或管理Cookie，但这可能会影响您使用我们服务的体验。
							</view>
						</view>
						
						<view class="agreement-section">
							<view class="agreement-section-title">三、我们如何共享、转让、公开披露您的个人信息</view>
							<view class="agreement-section-text">
								3.1 未经您的同意，我们不会向任何第三方共享您的个人信息，但以下情况除外：
							</view>
							<view class="agreement-section-text">
								(1) 与我们的关联公司共享；
							</view>
							<view class="agreement-section-text">
								(2) 与授权合作伙伴共享；
							</view>
							<view class="agreement-section-text">
								(3) 在法定情形下的共享。
							</view>
						</view>
						
						<view class="agreement-section">
							<view class="agreement-section-title">四、我们如何保护您的个人信息</view>
							<view class="agreement-section-text">
								4.1 我们会采取各种安全技术和程序，以防信息的丢失、不当使用、未经授权阅览或披露。
							</view>
							<view class="agreement-section-text">
								4.2 我们会尽力保护您的个人信息，但请您理解，互联网环境并非百分之百安全，我们无法保证绝对的安全。
							</view>
						</view>
					</view>
				</scroll-view>
				<button class="confirm-btn" @click="hidePrivacy">我已阅读并同意</button>
			</view>
		</uni-popup>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted,
		computed,
		nextTick
	} from 'vue';
	import {
		authApi
	} from '@/api/index.js'; 
	import common from '@/utils/common.js';
	import storage from '@/utils/storage.js';
	import uniNavBar from '@dcloudio/uni-ui/lib/uni-nav-bar/uni-nav-bar.vue';
	import uniPopup from '@dcloudio/uni-ui/lib/uni-popup/uni-popup.vue';
	import { onShow } from '@dcloudio/uni-app';

	// 响应式数据
	const loading = ref(false);
	const privacyAgreed = ref(false); // 隐私协议是否同意
	const phoneLoginPopup = ref(null);
	const agreementPopup = ref(null);
	const privacyPopup = ref(null);
	const phone = ref('');
	const smsCode = ref('');
	const countdown = ref(0);
	const smsBtnText = computed(() => {
		return countdown.value > 0 ? `重新发送(${countdown.value}s)` : '获取验证码';
	});
	const isCounting = computed(() => countdown.value > 0);
	const canLogin = computed(() => {
		return phone.value.length === 11 && smsCode.value.length === 6 && privacyAgreed.value;
	});
	// 保存微信登录后获取的openid
	const userOpenid = ref('');

	// 导航回退
	const navigateBack = () => {
		uni.navigateBack();
	};

	// 切换隐私协议同意状态
	const togglePrivacyAgreement = (e) => {
		console.log('togglePrivacyAgreement called', e.detail.value);
		// e.detail.value 是一个数组，包含所有选中 checkbox 的 value 值
		// 如果选中了我们的 checkbox，e.detail.value 会包含 'agreed'
		privacyAgreed.value = e.detail.value.includes('agreed');
		console.log('privacyAgreed.value updated to:', privacyAgreed.value);
	};
	
	// 显示手机号登录弹窗
	const showPhoneLoginModal = () => {
		if (!privacyAgreed.value) {
			common.showError('请先阅读并同意用户协议和隐私政策');
			return;
		}
		
		// 如果没有获取到openid，先尝试获取微信授权
		if (!userOpenid.value) {
			tryGetWechatOpenid();
		}
		
		if (phoneLoginPopup.value) {
			phoneLoginPopup.value.open('bottom');
		} else {
			console.error('phoneLoginPopup不存在');
		}
	};
	
	// 尝试获取微信openid但不登录
	const tryGetWechatOpenid = async () => {
		try {
			const loginRes = await uni.login();
			if (loginRes.errMsg === 'login:ok') {
				const { code } = loginRes;
				
				// 调用后端API仅获取openid，不执行登录
				const res = await authApi.getWechatOpenid({ code });
				console.log('获取微信openid响应:', res);
				
				if (res.code === 200 && res.data && res.data.openid) {
					userOpenid.value = res.data.openid;
					console.log('成功获取微信openid:', userOpenid.value);
					
					// 存储到本地
					uni.setStorageSync('userOpenid', userOpenid.value);
				}
			}
		} catch (error) {
			console.error('获取微信openid失败:', error);
			// 获取失败不阻止后续流程，用户仍可以使用手机号登录
		}
	};
	
	// 隐藏手机号登录弹窗
	const hidePhoneLoginModal = () => {
		if (phoneLoginPopup.value) {
			phoneLoginPopup.value.close();
			// 重置表单
			phone.value = '';
			smsCode.value = '';
		}
	};

	// 显示用户协议
	const showUserAgreement = () => {
		agreementPopup.value.open();
	};
	
	// 隐藏用户协议
	const hideAgreement = () => {
		agreementPopup.value.close();
		privacyAgreed.value = true;
	};
	
	// 显示隐私政策
	const showPrivacyPolicy = () => {
		privacyPopup.value.open();
	};
	
	// 隐藏隐私政策
	const hidePrivacy = () => {
		privacyPopup.value.close();
		privacyAgreed.value = true;
	};
	
	// 发送短信验证码
	const sendSmsCode = async () => {
		if (isCounting.value) return;
		
		// 手机号验证
		if (!/^1[3-9]\d{9}$/.test(phone.value)) {
			common.showError('请输入正确的手机号码');
			return;
		}
		
		try {
			loading.value = true;
			
			// 调用后端API发送验证码
			const response = await authApi.sendSmsCode({phone: phone.value});
			// console.log('发送验证码响应:', response);
			// 
			if (response.code === 200) { 
				common.showSuccess('验证码发送成功，请查收');
				
				// 开始倒计时
				countdown.value = 60;
				const timer = setInterval(() => {
					countdown.value--;
					if (countdown.value <= 0) {
						clearInterval(timer);
					}
				}, 1000);
			} else {
				common.showError(response.msg || '发送验证码失败');
			}
		} catch (error) {
			console.error('发送验证码失败:', error);
			common.showError(error.message || '发送验证码失败，请稍后重试');
		} finally {
			loading.value = false;
		}
	};

	// 手机号验证码登录
	const handlePhoneLogin = async () => {
		// 验证手机号格式
		if (!/^1[3-9]\d{9}$/.test(phone.value)) {
			common.showError('请输入正确的手机号码');
			return;
		}
		
		// 验证验证码格式
		if (!/^\d{6}$/.test(smsCode.value)) {
			common.showError('请输入正确的验证码');
			return;
		}
		
		// 验证是否同意协议
		if (!privacyAgreed.value) {
			common.showError('请先阅读并同意用户协议和隐私政策');
			return;
		}
		
		loading.value = true;
		common.showLoading('登录中...');
		
		try {
			// 准备登录参数，如果有openid则一并传递
			const loginData = {
				phone: phone.value,
				code: smsCode.value
			};
			
			// 如果有缓存的openid，添加到登录参数中
			if (userOpenid.value) {
				loginData.openid = userOpenid.value;
				console.log('检测到openid，将与手机号关联:', userOpenid.value);
			}
			
			// 调用后端API进行登录验证
			const res = await authApi.phoneLogin(loginData);
			console.log('手机号登录响应:', res);
			
			if (res.code === 200) { // 使用正确的成功状态码
				hidePhoneLoginModal();
				handleLoginSuccess(res.data);
			} else {
				common.showError(res.msg || '登录失败，请重试');
			}
		} catch (error) {
			console.error('手机号登录失败:', error);
			common.showError(error.response?.data?.msg || error.message || '手机号登录失败，请重试');
		} finally {
			loading.value = false;
			common.hideLoading();
		}
	};

	// 检查隐私协议并处理手机号登录
	const checkPrivacyAndLogin = (e) => {
		if (!privacyAgreed.value) {
			common.showError('请先阅读并同意用户协议和隐私政策');
			return;
		}
		
		handleGetPhoneNumber(e);
	};
	
	// 检查隐私协议并处理微信登录
	const checkPrivacyAndWechatLogin = () => {
		if (!privacyAgreed.value) {
			common.showError('请先阅读并同意用户协议和隐私政策');
			return;
		}
		
		handleWechatLogin();
	};

	// 处理获取手机号（手机号安全登录）
	const handleGetPhoneNumber = async (e) => {
		if (e.detail.errMsg === 'getPhoneNumber:ok') {
			loading.value = true;
			common.showLoading('登录中...');
			try {
				// 这里的 code 是用于后端获取手机号的凭证
				const {
					code
				} = e.detail;
				// 调用后端接口，传递 code 进行微信手机号登录/注册
				const res = await authApi.wechatPhoneLogin({
					code
				}); // 假设后端有 wechatPhoneLogin 接口
				handleLoginSuccess(res.data);
			} catch (error) {
				console.error('手机号登录失败:', error);
				common.showError(error.message || '手机号登录失败');
			} finally {
				loading.value = false;
				common.hideLoading();
			}
		} else {
			common.showError('获取手机号失败，请重试');
		}
	};

	// 处理一键登录（获取 openid 登录）
	const handleWechatLogin = async () => {
		loading.value = true;
		common.showLoading('登录中...');
		
		// 设置登录超时处理，增加到90秒
		const timeoutId = setTimeout(() => {
			if (loading.value) {
				loading.value = false;
				common.hideLoading();
				common.showToast('登录请求处理时间较长，请稍候...');
				
				// 不中断请求，只是提示用户
				setTimeout(() => {
					if (loading.value) {
						common.showToast('系统仍在处理，请耐心等待', 'none', 3000);
					}
				}, 30000); // 再等30秒后再提示
			}
		}, 30000); // 30秒后提示用户
		
		try {
			const loginRes = await uni.login();
			if (loginRes.errMsg === 'login:ok') {
				const { code } = loginRes;
				
				// 微信登录时，不发送微信用户信息(头像、昵称等)
				// 只发送code给服务端，由服务端决定是否需要使用微信信息
				const loginData = {
					code: code,
				};

				console.log('开始调用微信登录API');
				const res = await authApi.wechatLogin(loginData);
				console.log('微信登录API调用成功', res);
				
				// 清除超时定时器
				clearTimeout(timeoutId);
				
				// 如果登录成功且返回了openid，保存起来用于后续可能的手机号登录关联
				if (res.code === 200 && res.data && res.data.userInfo && res.data.userInfo.openid) {
					userOpenid.value = res.data.userInfo.openid;
					console.log('保存微信openid:', userOpenid.value);
					
					// 也可以存储到本地，以便页面刷新后仍能使用
					uni.setStorageSync('userOpenid', userOpenid.value);
				}
				
				handleLoginSuccess(res.data);
			} else {
				clearTimeout(timeoutId);
				common.showError('微信登录授权失败');
			}
		} catch (error) {
			// 清除超时定时器
			clearTimeout(timeoutId);
			
			console.error('一键登录失败:', error);
			const errorMsg = error?.message || error?.errMsg || '一键登录失败，请重试';
			common.showError(errorMsg);
		} finally {
			// 确保loading状态被重置
			loading.value = false;
			common.hideLoading();
		}
	};

	// 登录成功后的统一处理
	const handleLoginSuccess = (data) => {
		loading.value = false;
		common.hideLoading();
		
		if (!data || !data.token || !data.userInfo) {
			common.showError('登录返回数据异常');
			console.error('登录返回数据异常:', data);
			return;
		}
		
		// 存储token和用户信息
		storage.setToken(data.token);
		storage.setUserInfo(data.userInfo);
		
		// 显示新人券信息（如果有）
		if (data.newUserCoupons && data.newUserCoupons.length > 0) {
			common.showSuccess(`登录成功，获得${data.newUserCoupons.length}张新人券！`);
		} else {
			common.showSuccess('登录成功');
		}

		// 登录成功后，尝试跳转到首页
		setTimeout(() => {
			// 使用switchTab确保跳转到tabBar页面
			uni.switchTab({
				url: '/pages/index/index',
				fail: (err) => {
					console.error('跳转首页失败:', err);
					// 如果跳转失败，尝试跳转到其他页面
					uni.reLaunch({
				url: '/pages/index/index'
					});
				}
			});
		}, 1500);
	};

	// 生命周期
	onMounted(() => {
		// 尝试从本地存储读取缓存的openid
		try {
			const cachedOpenid = uni.getStorageSync('userOpenid');
			if (cachedOpenid) {
				userOpenid.value = cachedOpenid;
				console.log('从本地存储加载openid:', userOpenid.value);
			}
		} catch (e) {
			console.error('读取本地存储的openid失败:', e);
		}
		
		// 如果已登录，可以直接跳转到首页
		if (storage.getToken() && storage.getUserInfo()) {
			uni.switchTab({
				url: '/pages/index/index'
			});
		}
	});
</script>

<style scoped>
	.container {
		min-height: 100vh;
		background-color: #ffffff;
		display: flex;
		flex-direction: column;
		position: relative;
	}

	/* 插画和营销文案 */
	.illustration-section {
		position: relative;
		width: 100%;
		height: 550rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		overflow: hidden;
		margin-top: 30rpx;
	}

	.illustration-image {
		width: 90%;
		position: absolute;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
	}

	.marketing-bubble {
		position: absolute;
		top: 40rpx;
		left: 50%;
		transform: translateX(-50%) rotate(-5deg);
		background-color: #4e78e0;
		border-radius: 60rpx;
		padding: 30rpx 50rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
		z-index: 10;
	}

	.coupon-icon {
		width: 60rpx;
		height: 60rpx;
		margin-bottom: 10rpx;
		display: none;
	}

	.marketing-text {
		font-size: 34rpx;
		font-weight: bold;
		color: #ffffff;
		line-height: 1.4;
	}

	/* 登录按钮区域 */
	.login-buttons {
		padding: 40rpx;
		display: flex;
		flex-direction: column;
		gap: 30rpx;
		margin-top: 40rpx;
		margin-bottom: 60rpx;
		align-items: center;
	}

	.login-btn {
		width: 80%;
		height: 90rpx;
		border-radius: 45rpx;
		font-size: 34rpx;
		font-weight: bold;
		color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.phone-login-btn {
		background-color: #003cff;
	}

	.wechat-login-btn {
		background-color: #07c160;
	}

	.login-btn[disabled] {
		opacity: 0.6;
	}

	/* 隐私协议 */
	.privacy-agreement {
		padding: 20rpx 40rpx 40rpx;
		text-align: center;
		font-size: 26rpx;
		color: #999;
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
	}

	.checkbox-label {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.agreement-text {
		margin-left: 10rpx;
	}

	.agreement-link {
		color: #3370ff;
		text-decoration: underline;
	}
	
	/* 弹窗样式 */
	.popup-content {
		background-color: #fff;
		border-radius: 24rpx 24rpx 0 0;
		padding: 40rpx;
		position: relative;
		box-sizing: border-box;
		width: 100%;
	}
	
	.popup-content2 {
		background-color: #fff;
		border-radius: 24rpx 24rpx 0 0;
		padding: 40rpx;
		position: relative;
		width: 100%;
	}
	
	.popup-title {
		font-size: 36rpx;
		font-weight: bold;
		text-align: center;
		margin-bottom: 40rpx;
		padding-bottom: 20rpx;
		border-bottom: 1rpx solid #f0f0f0;
	}
	
	.popup-close {
		position: absolute;
		top: 30rpx;
		right: 30rpx;
		width: 60rpx;
		height: 60rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 10;
	}
	
	.close-icon {
		font-size: 48rpx;
		color: #999;
	}
	
	.input-group {
		margin-bottom: 40rpx;
	}
	
	.input-item {
		border-bottom: 1rpx solid #e0e0e0;
		padding: 20rpx 0;
		margin-bottom: 20rpx;
		display: flex;
		align-items: center;
	}
	
	.code-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	
	.input {
		flex: 1;
		height: 80rpx;
		font-size: 32rpx;
		border: none;
		background: transparent;
	}
	
	.code-btn {
		min-width: 200rpx;
		height: 70rpx;
		border-radius: 35rpx;
		background-color: #003cff;
		color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 28rpx;
		margin-left: 20rpx;
		padding: 0 20rpx;
		white-space: nowrap;
	}
	
	.code-btn-disabled {
		background-color: #ccc;
	}
	
	.confirm-btn {
		width: 100%;
		height: 90rpx;
		border-radius: 45rpx;
		background-color: #003cff;
		color: #fff;
		font-size: 34rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border: none;
		margin-top: 40rpx;
	}
	
	.confirm-btn[disabled] {
		opacity: 0.6;
	}
	
	/* 协议内容样式 */
	.agreement-content {
		height: 80vh;
		display: flex;
		flex-direction: column;
	}
	
	.agreement-scroll {
		flex: 1;
		overflow-y: auto;
		margin: 20rpx 0 30rpx;
		-webkit-overflow-scrolling: touch; /* 增强iOS滚动体验 */
		height: 80vh; /* 确保高度足够 */
	}
	
	.agreement-text-content {
		padding: 10rpx;
		padding-bottom: 80rpx; /* 增加底部内边距，确保最后部分内容可见 */
	}
	
	.agreement-section {
		margin-bottom: 30rpx;
	}
	
	.agreement-section-title {
		font-size: 32rpx;
		font-weight: bold;
		margin-bottom: 20rpx;
	}
	
	.agreement-section-text {
		font-size: 28rpx;
		color: #333;
		line-height: 1.6;
		margin-bottom: 10rpx;
		text-align: justify;
	}
	
	/* 修改按钮样式确保不会遮挡内容 */
	.agreement-content .confirm-btn {
		margin-top: 20rpx;
		position: relative;
		z-index: 10;
	}
</style>